Dark Mode

AiraCSS framework also supports dark mode and custom modes

Modern browsers come with a way to detect if a user has set their theme preference to light or dark by using the prefers-color-scheme keyword.

This value can be used in a media query to change a website’s styles accordingly:

@media (prefers-color-scheme: dark) {
  :root {
    /* Update CSS variables */
  }
}

However, it’s not possible for a website to alter this preference. That’s why it’s preferable to also add a data-theme HTML attribute or a dark-theme CSS class.

This is how AStral.CSS defines its dark theme:

  
    @media (prefers-color-scheme: dark) {
      :root {
        /* Update CSS variables */
      }
    }
    
    [data-theme=dark],
    .dark-theme {
      /* Update CSS variables */
    }

With these rules:

  • the website will be light by default, if no user preference is set
  • it will also be light if the user has set their preference to light
  • the website will be dark if the user has set their preference to dark

Force Dark Mode within a page

You can enable Dark Mode in part of your HTML by simply using the body attribute or the CSS class:




  This is in Light Mode if the user hasn't set a preference, or if their preference is set to light.





  This is in Dark Mode





  This is also in Dark Mode

Force Dark Mode for a whole webpage

If you want to enable Dark Mode for a whole webpage, simply set the attribute or the class on the <body> element:

<body class="dark-theme"></body>
<body data-theme="dark"></body>